<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<style>
    #title {
        width: 400px;
        height: 20px;
    }

</style>
<body>
<div style="margin: 0 auto; width: 700px;height: 500px;text-align: center;background-color:lightgray">
    <h2>搜一搜</h2>
    <strong>输入搜索的关键字</strong><input type="text" id="title" name="title" value="" autocomplete="off">
    <input type="button" value="搜一搜">
    <div style="width: 405px;margin-left: 178px;border: 1px solid;text-align:left;display: none" id="showKeyWord"></div>
</div>
</body>

<script>
   $(function () {
       $("#title").keyup(function () {
          var $keyword=$("#title").val();
          if ($keyword.trim().length>0){
              $.ajax({
                  url:"BordServlet",
                  type:"POST",
                  data:{
                    keyword:$keyword.trim()
                  },
                  dataType:"json",
                  success:function (rel) {
                      var $big=$("#showKeyWord");
                      $big.html("");
                      var small="";
                      if (rel.length>0){
                        $.each(rel,function (i,n) {
                            small+="<div class='op'>";
                            small+=n;
                            small+="</div>";
                        })
                          $big.html(small).css("display","block");
                      }else {
                          $big.css("display","none");
                      }
                  }
              });
          } else {
              $("#showKeyWord").css("display","none");
          }
       });

       $(".op").live("mouseover",function () {
           $(this).css("backgroundColor","#EADDCA");
           $(this).css("cursor","pointer");

       });
       $(".op").live("mouseout",function () {
           $(this).css("backgroundColor","");
       });
       $(".op").live("click",function () {
           $("#title").val($(this).html());
           $("#showKeyWord").css("display","none");
       });

   });


</script>
</html>